<template>
  <a-form
    id="formLogin"
    class="user-layout-login"
    ref="formLogin"
    :form="form"
    @submit.prevent="handleSubmit"
  >
    <a-form-item>
      <a-input
        v-decorator.trim="[
          'email',
          { initialValue: 'm15809257441@163.com' },
          {
            rules: [
              formRules.required('Incorrect email'),
              formRules.email('Incorrect email'),
            ],
            validateFirst: true,
            validateTrigger: 'change'
          }
        ]"
        size="large"
        type="text"
        placeholder="Email"
      >
        <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
      </a-input>
    </a-form-item>

    <a-form-item>
      <a-input-password
        v-decorator.trim="[
          'password',
          { initialValue: 'getwagenow20210930' },
          {
            rules: [
              formRules.required('Incorrect password'),
            ],
            validateFirst: true,
            validateTrigger: 'change'
          }
        ]"
        size="large"
        type="text"
        placeholder="Password"
      >
        <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
      </a-input-password>
    </a-form-item>
    <a-form-item style="margin-top:24px">
      <a-button
        size="large"
        type="primary"
        html-type="submit"
        class="login-button"
        :loading="state.loginBtn"
        @click.prevent="handleSubmit"
      >
        确定
      </a-button>
    </a-form-item>

    <div class="user-login-other" v-if="false">
      <!-- <span>其他登录方式</span> -->
      <!-- <a>
        <a-icon class="item-icon" type="alipay-circle" />
      </a>
      <a>
        <a-icon class="item-icon" type="taobao-circle" />
      </a>
      <a>
        <a-icon class="item-icon" type="weibo-circle" />
      </a> -->
      <!-- <router-link class="register" :to="{ name: 'register' }">注册账户</router-link> -->
    </div>
  </a-form>
</template>

<script>
import formRules from '@/utils/form/rules'
import form from './form'

export default {
  mixins: [form],

  data () {
    return {
      formRules,
    }
  },
}
</script>

<style lang="scss" scoped>

.user-layout-login {
  label {
    font-size: 14px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }

  .forge-password {
    font-size: 14px;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }

  .user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;

    .item-icon {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: $theme-color;
      }
    }

    .register {
      float: right;
    }
  }
}
</style>
